:root {
  color-scheme: light;
  --text-color: #000000;
  --scrollbar-color: #ccc;
  /* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  background-color: var(--el-bg-color);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
}

#app {
  width: 100%;
  height: 100vh;
}

html {
  /* 定义滚动条的整体样式 */
  ::-webkit-scrollbar {
    width: 8px; /* 水平滚动条的宽度 */
    height: 8px; /* 垂直滚动条的高度 */
  }

  /* 定义滚动条轨道的样式 */
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  /* 定义滚动条滑块的样式 */
  ::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color); /* rgba(0, 0, 0, 0.2); */
    border-radius: 4px;
  }

  /* 当鼠标悬停时改变滚动条滑块的样式 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: blue; /* rgba(0, 0, 0, 0.5); */
  }

  /* 隐藏滚动条，但仍然允许滚动 */
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* 使滚动条仅在鼠标悬停时显示 */
  .hover-scrollbar {
    overflow-y: scroll; /* 显示垂直滚动条 */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: blue transparent; /* rgba(0, 0, 0, 0.2) transparent; */  /* Firefox */
  }

  /* 鼠标悬停时显示滚动条 */
  .hover-scrollbar:hover {
    scrollbar-width: auto; /* Firefox */
    scrollbar-color: blue transparent; /* rgba(0, 0, 0, 0.2) transparent; */ /* Firefox */
  }

  /* 鼠标悬停时显示滚动条（WebKit 浏览器） */
  .hover-scrollbar:hover::-webkit-scrollbar {
    display: block;
  }
}

html.dark {
  color-scheme: dark;
  --text-color: #ffffff;
  --scrollbar-color: #666;
   /* 定义滚动条的整体样式 */
   ::-webkit-scrollbar {
    width: 8px; /* 水平滚动条的宽度 */
    height: 8px; /* 垂直滚动条的高度 */
  }

  /* 定义滚动条轨道的样式 */
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  /* 定义滚动条滑块的样式 */
  ::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color); /* rgba(0, 0, 0, 0.2); */
    border-radius: 4px;
  }

  /* 当鼠标悬停时改变滚动条滑块的样式 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: blue; /* rgba(0, 0, 0, 0.5); */
  }

  /* 隐藏滚动条，但仍然允许滚动 */
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* 使滚动条仅在鼠标悬停时显示 */
  .hover-scrollbar {
    overflow-y: scroll; /* 显示垂直滚动条 */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: blue transparent; /* rgba(0, 0, 0, 0.2) transparent; */  /* Firefox */
  }

  /* 鼠标悬停时显示滚动条 */
  .hover-scrollbar:hover {
    scrollbar-width: auto; /* Firefox */
    scrollbar-color: blue transparent; /* rgba(0, 0, 0, 0.2) transparent; */ /* Firefox */
  }

  /* 鼠标悬停时显示滚动条（WebKit 浏览器） */
  .hover-scrollbar:hover::-webkit-scrollbar {
    display: block;
  }
}

#nprogress .bar {
  background: var(--el-color-primary); /*#42b983;*/ /* 设置进度条颜色 */
  position: fixed; /* 固定位置 */
  z-index: 1031; /* 设置层级 */
  top: 0;
  left: 0;
  width: 100%;
  height: 2px; /* 设置高度 */
}

#nprogress .peg {
  display: block;
  position: absolute;
  right: 0;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px var(--el-color-primary), 0 0 5px var(--el-color-primary);
  opacity: 1;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

/* @media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
} */
